#9706: Allow time range filtering for Attribute Table quick filter #9743

mahmoudadel54 · 2023-11-23T23:14:02Z

Description

adding filter operators dropdown list in attribute table that includes range operator for time/date attributes
creating a custom picker for range
write unit tests
Edit in style

Please check if the PR fulfills these requirements

The commit message follows our guidelines: https://github.com/geosolutions-it/MapStore2/blob/master/CONTRIBUTING.md
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x", remove the others)

Issue

#9706

What is the current behavior?
#9706

What is the new behavior?
Different filter operators dropdown is added to the attribute table columns including range time/date

Breaking change

Does this PR introduce a breaking change? (check one with "x", remove the other)

Yes, and I documented them in migration notes
No

…ith different operators

…quick filter and allow additional filter operators for other attributes Description: - adding filter operators dropdown list in attribute table that includes range operator for time/date attributes - creating a custom picker for range - write unit tests - Edit in style

…turegrid file

MV88

The functionality works well, but there a few things to change and some inconsistencies/bugs to handle:

operator must match
cursor style
invalid range
one single icon was requested
little style issue
improve focus style on time picker
improve style on operator
inconsistent value after wsitching back from between operator ><
single datetime field is not using new component and must use it

web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx

MV88 · 2023-11-24T14:48:16Z

web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx

+        tooltipMsgId: PropTypes.string,
+        operator: PropTypes.string,
+        type: PropTypes.string,
+        isWithinAttrTbl: PropTypes.bool


i think that this should be removed in the future since also attribute table in dashboard should inherit timerange changes

MV88

some extra points

web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx

web/client/components/misc/datetimepicker/CustomDateTimePickerWithRange.js

Desciption: - remove expression from filter inputs and make validation for the inputs - Add cursor style to 'Start' & 'End' tabs - Add validation for ranges - Replace 2 icons with one icon for date-time filter - Fix style issues - Fixed 'Start', 'End' tabs in scroll - improve style of operator - reset date/time if user change operator from range operator to another

MV88

this is not done "one single icon was requested" as it was requested in the issue here
calendar is not fully visible, can you add at leas a scrollbar if you can't display as drop up?

the rest seems ok a part some inline comment

web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx

web/client/components/misc/datetimepicker/DateTimePicker.js

mahmoudadel54 · 2023-12-14T10:05:47Z

this is not done "one single icon was requested" as it was requested in the issue here

I don't know how can I get the attached icon, I searched for the icons in react-widget lib version 3.5.0 but I didn't find the required one
@MV88

calendar is not fully visible, can you add at leas a scrollbar if you can't display as drop up?

I have tried much time to use drop up but there is a big css issue I couldn't resolve it and during trying handle this point, it reflects on other css for the attribute table
I will try the 1st suggestion of making scroll

mahmoudadel54 · 2023-12-14T12:51:47Z

@MV88
For adding scroll in dates picker, this is a demo demonstrating implementation of it. Is it acceptable ?

scroll.in.dates.pickers.mp4

MV88 · 2023-12-14T13:48:45Z

this is not done "one single icon was requested" as it was requested in the issue here

I don't know how can I get the attached icon, I searched for the icons in react-widget lib version 3.5.0 but I didn't find the required one @MV88

I'm sorry maybe you haven't done it before.
You have to create a new one

take the calendar and time icons and merge them together by using a tool for editing svg like inkscape
put the new svg in this folder https://github.com/geosolutions-it/MapStore2/tree/master/web/client/themes/default/svg
make it similar in size to the others
run npm run generate:icons
test calling it inside glyphicon component the the name of the svg file

calendar is not fully visible, can you add at leas a scrollbar if you can't display as drop up?

I have tried much time to use drop up but there is a big css issue I couldn't resolve it and during trying handle this point, it reflects on other css for the attribute table I will try the 1st suggestion of making scroll

ok i'll try to give a better look, but maybe @allyoucanmap has a suggestion on this point

MV88 · 2023-12-14T13:49:54Z

@MV88 For adding scroll in dates picker, this is a demo demonstrating implementation of it. Is it acceptable ?

scroll.in.dates.pickers.mp4

at least you can view almost all data, there is still some part not well selectable

allyoucanmap · 2023-12-15T08:43:35Z

@mahmoudadel54 @MV88 here the icon
date-time.zip

MV88

@mahmoudadel54 hi

things to do here

use new icon made by @allyoucanmap
solve conflict
try to fix at least the bottom part of the datepicker

…quick filter * Description: - Add date-time icon and use it - replcae inline if - using omit instead of reduce - fix some style issues in date/time pickers in range component

…ore2 into feature_9706

…quick filter * Description: - Fix FE test failure

Description: - Improve UI of pickers by using popover component in dateTime/Date/Hours pickers - Enable update popover position in case of scroll the container conponent - write unit tests due to changes - Rename range date-time picker by 'RangedDateTimePicker'

mahmoudadel54 · 2024-01-14T23:28:26Z

@mahmoudadel54 hi
things to do here

use new icon made by @allyoucanmap

solve conflict

try to fix at least the bottom part of the datepicker

@tdipisa the third point here is not resolved and i tried locally to find an alternative fix but it could require some refactor effort and for the moment i'm going to put this in blocked.

i'll also push some changes to a separate branch that will produce a similar result but which is incomplete and not fully working

The refactor parts are

there will be three new components:

a DateTimePicker that will allow user to select a date only, a time only, a date and time

a RangedDateTimePicker that will reuse the previous component to show the ranged mode

a new Time.jsx component that will allow to type or select an hour

otherwise we can maintain the old DateTimePicker and CustomDateTimePickerWithRange and refactor them later on

for the time picker we can simply use a combobox and not current component,

we can keep the selected value with background as primary or the default selected bg color we have, e.g

create a new component for the moment called Time in web\client\components\misc\datetimepicker

quickly check if this is applicable to the one in queryform

we have then check if clicks in and outside the container behaves correctly

we need to maintain the possibility to edit the value manually once selected from the combobox

in the case of datetime picker both picker must be visible from the start, so the overall style must be refined or adapted (like reducing paddings etc making it more compact than what is in the image above)

this means to avoid to show the vertical scrollbar as well

when user clicks on time picker it should expand at the top if if space is not available

the date time picker will hide if user clicks outside the related container of the datetime picker

Hi @MV88
I have tried to use Combobox component as you mentioned but it didn't work as expected so I tried to use popover component as in your POC branch and this is a demo demonstrating the UI improvements in pickers
Also I have fixed the issue of fixing the popover even if user makes some scroll in the UI like here if user opens date picker and wants to scroll into horizontal direction [it is in demo as well]

UI.improvements.for.datetime.pickers.mp4

MV88

i have noticed these

reopening the combobox the selected hour is not visible
editing year manually in the input field is is not aligned to the calendar

please better check how this tools can be used to spot these problems

Description: - Handle highlight selected hours component - Fix not alignment in dateTime picker - Fix not alignment selected date in calendar for date/ dateTime pickers - Minimize calendar row height to improve showing date picker UI - Create a util function 'getLocalTimePart' to get time part for local time

MV88

placeholder for time should be type a time to filter...
when passing from date time ranged to a single datetime app crashed

datetime.range.crash.mp4

also you can enter 70 seconds and it's not parsed. but i think we can improve this in another pr

Description: - Add placeholder for time picker - Add translations for the added time placeholder - Fix crash app bug due to entering invalid date in input texts of date/time Pickers

MV88

looks ok. a few changes here

web/client/translations/data.it-IT.json

MV88

there is an issue with the popover size when mode is changed in the calendar

popover.issue.in.height.change.of.content.container.mp4

dsuren1 · 2024-01-22T14:02:00Z

Resizing the height of the popup to display calendar content doesn't look pleasing as the varying size makes it convoluted for user interactions. Hence a fixed height is used instead as shown below.

Date filter

Screen.Recording.2024-01-22.at.6.57.56.PM.mov

Date-time filter

Screen.Recording.2024-01-22.at.7.02.33.PM.mov

tdipisa · 2024-01-22T15:57:53Z

@MV88 can you please proceed asap with the review?

MV88 · 2024-01-22T16:24:37Z

@ElenaGallo please test it in DEV using a date, time and date time layer like this map https://dev-mapstore.geosolutionsgroup.com/mapstore/#/viewer/28584

ElenaGallo · 2024-01-22T17:26:04Z

Hi @dsuren1, I only notice that some filters, in edit mode, are enabled

How to reproduce

Open the attribute table
Click on Edit mode

tdipisa · 2024-01-22T17:31:39Z

@ElenaGallo please open a new issue for the above and assign it to refer to @dsuren1.
@dsuren1 that should be a quick fix to do. Thank you.

dsuren1 · 2024-01-23T05:43:41Z

@ElenaGallo

I believe this is an expected behavior. Kindly check this map in QA

The only problem I see is that when the field is disabled, the operator dropdown should be disabled too, as some are not, from the screenshot you shared. Additionally, the time fields are not disabled (in edit mode) and it should, which is an existing problem in QA. Kindly report this in the new issue. Thanks!

tdipisa · 2024-01-23T08:30:24Z

@dsuren1 that's effectively the reason why I've asked to open a new issue. Thank you for clarifying this anyway.

ElenaGallo · 2024-01-23T08:40:13Z

@dsuren1 @tdipisa new issue here: #9901

mahmoudadel54 added 2 commits November 22, 2023 19:19

geosolutions-it#9706: handle the advanced filter in attribute table w…

7f3c2e7

…ith different operators

mahmoudadel54 added enhancement C040-COMUNE_GE-2023-CUSTOM-SUPPORT labels Nov 23, 2023

mahmoudadel54 requested a review from MV88 November 23, 2023 23:14

mahmoudadel54 self-assigned this Nov 23, 2023

mahmoudadel54 linked an issue Nov 23, 2023 that may be closed by this pull request

Allow time range filtering for Attribute Table quick filter #9706

Closed

13 tasks

mahmoudadel54 and others added 3 commits November 24, 2023 01:14

Merge branch 'master' into feature_9706

5205513

geosolutions-it#9706: fix test failure by remove unused variable

7edb767

geosolutions-it#9706: fix test failure by remove unused action in fea…

2bec670

…turegrid file

MV88 requested changes Nov 24, 2023

View reviewed changes

web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx Outdated Show resolved Hide resolved

web/client/components/misc/datetimepicker/CustomDateTimePickerWithRange.js Outdated Show resolved Hide resolved

tdipisa added this to the 2024.01.00 milestone Nov 27, 2023

mahmoudadel54 requested a review from MV88 December 1, 2023 09:06

mahmoudadel54 and others added 2 commits December 1, 2023 11:42

geosolutions-it#9706: fix test case in AttributeFilter file

70e7e69

Merge branch 'master' into feature_9706

083b971

MV88 requested changes Dec 13, 2023

View reviewed changes

web/client/components/data/featuregrid/filterRenderers/AttributeFilter.jsx Outdated Show resolved Hide resolved

web/client/components/misc/datetimepicker/DateTimePicker.js Outdated Show resolved Hide resolved

MV88 self-requested a review December 15, 2023 09:04

MV88 requested changes Dec 15, 2023

View reviewed changes

mahmoudadel54 and others added 4 commits December 15, 2023 11:27

Merge branch 'master' into feature_9706

483af18

geosolutions-it#9706: Allow time range filtering for Attribute Table …

c4f5640

…quick filter * Description: - Add date-time icon and use it - replcae inline if - using omit instead of reduce - fix some style issues in date/time pickers in range component

Merge branch 'feature_9706' of https://github.com/mahmoudadel54/MapSt…

820517c

…ore2 into feature_9706

geosolutions-it#9706: Allow time range filtering for Attribute Table …

322d3d4

…quick filter * Description: - Fix FE test failure

mahmoudadel54 requested a review from MV88 December 18, 2023 06:29

MV88 requested changes Jan 15, 2024

View reviewed changes

mahmoudadel54 requested a review from MV88 January 16, 2024 09:38

geosolutions-it#9706: resolve FE test failure

ad64e56

MV88 requested changes Jan 18, 2024

View reviewed changes

geosolutions-it#9706: resolve reviewer comments

ad2ff6f

Description: - Add placeholder for time picker - Add translations for the added time placeholder - Fix crash app bug due to entering invalid date in input texts of date/time Pickers

mahmoudadel54 requested a review from MV88 January 18, 2024 16:39

geosolutions-it#9706: hide input tooltip when user open pickers

bd0c36f

MV88 requested changes Jan 19, 2024

View reviewed changes

web/client/translations/data.it-IT.json Outdated Show resolved Hide resolved

web/client/translations/data.it-IT.json Outdated Show resolved Hide resolved

MV88 requested changes Jan 19, 2024

View reviewed changes

dsuren1 added 2 commits January 22, 2024 19:00

Time filter refactor

be42c15

unit test

170fd7c

dsuren1 requested a review from MV88 January 22, 2024 14:13

MV88 approved these changes Jan 22, 2024

View reviewed changes

MV88 merged commit 93ea6ea into geosolutions-it:master Jan 22, 2024
6 checks passed

tdipisa assigned dsuren1 Jan 22, 2024

ElenaGallo mentioned this pull request Jan 23, 2024

Attribute Table - Disable the operator dropdown on Edit Mode #9901

Closed

dsuren1 mentioned this pull request Jan 25, 2024

Ability to select quick date ranges for date filter fields in Filter Layer tool #9915

Closed

2 tasks

allyoucanmap mentioned this pull request Jul 29, 2024

#10488: 'ilike' as default operator for text field in attribute table quick filter #10496

Merged

12 tasks

allyoucanmap mentioned this pull request Aug 9, 2024

#4675 Remove unused code #10442

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#9706: Allow time range filtering for Attribute Table quick filter #9743

#9706: Allow time range filtering for Attribute Table quick filter #9743

mahmoudadel54 commented Nov 23, 2023

MV88 left a comment •

edited

Loading

MV88 Nov 24, 2023

MV88 left a comment

MV88 left a comment •

edited by mahmoudadel54

Loading

mahmoudadel54 commented Dec 14, 2023 •

edited

Loading

mahmoudadel54 commented Dec 14, 2023

MV88 commented Dec 14, 2023

MV88 commented Dec 14, 2023

allyoucanmap commented Dec 15, 2023

MV88 left a comment •

edited by mahmoudadel54

Loading

mahmoudadel54 commented Jan 14, 2024

MV88 left a comment •

edited by mahmoudadel54

Loading

MV88 left a comment

MV88 left a comment

MV88 left a comment •

edited by dsuren1

Loading

dsuren1 commented Jan 22, 2024

tdipisa commented Jan 22, 2024

MV88 commented Jan 22, 2024

ElenaGallo commented Jan 22, 2024 •

edited by tdipisa

Loading

tdipisa commented Jan 22, 2024

dsuren1 commented Jan 23, 2024 •

edited

Loading

tdipisa commented Jan 23, 2024

ElenaGallo commented Jan 23, 2024

#9706: Allow time range filtering for Attribute Table quick filter #9743

#9706: Allow time range filtering for Attribute Table quick filter #9743

Conversation

mahmoudadel54 commented Nov 23, 2023

Description

Issue

Breaking change

MV88 left a comment • edited Loading

Choose a reason for hiding this comment

MV88 Nov 24, 2023

Choose a reason for hiding this comment

MV88 left a comment

Choose a reason for hiding this comment

MV88 left a comment • edited by mahmoudadel54 Loading

Choose a reason for hiding this comment

mahmoudadel54 commented Dec 14, 2023 • edited Loading

mahmoudadel54 commented Dec 14, 2023

MV88 commented Dec 14, 2023

MV88 commented Dec 14, 2023

allyoucanmap commented Dec 15, 2023

MV88 left a comment • edited by mahmoudadel54 Loading

Choose a reason for hiding this comment

mahmoudadel54 commented Jan 14, 2024

MV88 left a comment • edited by mahmoudadel54 Loading

Choose a reason for hiding this comment

MV88 left a comment

Choose a reason for hiding this comment

MV88 left a comment

Choose a reason for hiding this comment

MV88 left a comment • edited by dsuren1 Loading

Choose a reason for hiding this comment

dsuren1 commented Jan 22, 2024

tdipisa commented Jan 22, 2024

MV88 commented Jan 22, 2024

ElenaGallo commented Jan 22, 2024 • edited by tdipisa Loading

tdipisa commented Jan 22, 2024

dsuren1 commented Jan 23, 2024 • edited Loading

tdipisa commented Jan 23, 2024

ElenaGallo commented Jan 23, 2024

MV88 left a comment •

edited

Loading

MV88 left a comment •

edited by mahmoudadel54

Loading

mahmoudadel54 commented Dec 14, 2023 •

edited

Loading

MV88 left a comment •

edited by mahmoudadel54

Loading

MV88 left a comment •

edited by mahmoudadel54

Loading

MV88 left a comment •

edited by dsuren1

Loading

ElenaGallo commented Jan 22, 2024 •

edited by tdipisa

Loading

dsuren1 commented Jan 23, 2024 •

edited

Loading